<template>
  <div class="app-container">
      <div class="right-detail">
            <div class="cbox">
              <el-form class="form" ref="flt" :model="from" :rules="rules" label-width="11rem" size="mini">
                <el-row :gutter="10" class="row">
                  <el-col :span="5">
                        <el-form-item prop="code" label="港口代码：" label-width="9rem">
                          <el-input maxlength="32"  v-model="from.code" clearable ></el-input>
                        </el-form-item>
                  </el-col>
                  <el-col :span="5">
                        <el-form-item prop="name" label="港口名称：" label-width="9rem">
                          <el-input maxlength="32"  v-model="from.name" clearable ></el-input>
                        </el-form-item>
                  </el-col>
                  <el-col :span="5">
                        <el-form-item prop="yname" label="港口英文名称：">
                          <el-input maxlength="32"  v-model="from.yname" clearable ></el-input>
                        </el-form-item>
                  </el-col>
                  <el-col :span="5">
                      <el-form-item label="国家：" prop="gysmc" label-width="6rem">
                          <el-select style="width: 100%;" filterable allow-create clearable v-model="from.gysmc" placeholder="请选择国家">
                            <el-option
                              v-for=" item in listData"
                              :key="item.CTY_CD"
                              :value="item.CTY_CD"
                              :label="item.CTY_CNAME"
                            ></el-option>
                          </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="top-type" ref="topType">
                  <div class="btn-area" ref="btnArea">
                    <el-button plain size="mini" type="success" @click="add">新增港口</el-button>
                    <el-button plain size="mini" type="primary" @click="del('diong')">编辑港口</el-button>
                    <el-button plain size="mini" type="danger" @click="examine">删除港口</el-button>
                    <el-button plain size="mini" type="primary" @click="viewDetails">查看</el-button>
                  </div>
                  <div class="table" ref="inner">
                  <el-table
                      :data="DetailedData"
                      border
                      :height="maxheight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row

                      @row-click="rowClick">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="potCd" show-overflow-tooltip label="港口代码" width="130"></el-table-column>
                      <el-table-column prop="potCname" show-overflow-tooltip label="港口名称" width="130"></el-table-column>
                      <el-table-column prop="potEname" show-overflow-tooltip label="港口英文名称" width="130"></el-table-column>
                      <el-table-column prop="ctyCname" show-overflow-tooltip label="国家中文名" width="130"></el-table-column>
                      <el-table-column prop="ctyEname" show-overflow-tooltip label="国家英文名" width="130"></el-table-column>
                      <el-table-column prop="prvChnname" show-overflow-tooltip label="省中文名" width="130"></el-table-column>
                      <el-table-column prop="ctyeChnname" show-overflow-tooltip label="市中文名" width="130"></el-table-column>
                      <el-table-column prop="potX" show-overflow-tooltip label="港口X坐标" width="130"></el-table-column>
                      <el-table-column prop="potY" show-overflow-tooltip label="港口Y坐标" width="130"></el-table-column>
                      <el-table-column prop="potInsertdt" show-overflow-tooltip label="创建时间" width="130"></el-table-column>
                      <el-table-column prop="potInsertuser" show-overflow-tooltip label="创建员工" width="130"></el-table-column>
                      <el-table-column prop="potLstupddt" show-overflow-tooltip label="最后创建时间" width="160"></el-table-column>
                      <el-table-column prop="potLstupduser" show-overflow-tooltip label="最后创建员工" width="140"></el-table-column>
                      <el-table-column prop="potIsvalid" show-overflow-tooltip label="是否有效">
                        <template slot-scope="scope">
                          <div style="text-align: center;" v-if="scope.row.potIsvalid == 'Y'">
                            <el-checkbox v-model="item.item" disabled></el-checkbox>
                          </div>
                          <div style="text-align: center;" v-if="scope.row.potIsvalid == 'N'">
                            <el-checkbox v-model="item.itemA" disabled></el-checkbox>
                          </div>
                        </template>
                      </el-table-column>
                  </el-table>
                  </div>
                    <!-- 分页 -->
                      <div class="pages">
                        <el-pagination
                          class="pagination"
                          small
                          background
                          ref="pagination"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="Pagination.currentPage"
                          :page-sizes="Pagination.pageSizeList"
                          :page-size="Pagination.pageSize"
                          :layout="Pagination.layout"
                          :total="Pagination.total"
                        ></el-pagination>
                      </div>
              </div>
        </div>
        <!-- 弹出框 新增 编辑 查看-->
        <el-dialog
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          v-el-drag-dialog
          :close-on-click-modal="false">
              <el-form  label-width="13rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                  <el-row>

                      <el-col :span="12">
                        <el-form-item prop="potCd" label="港口代码：">
                          <el-input maxlength="32"  v-model="xzData.potCd" clearable :disabled="diong==='E'" @change="uppercase('potCd')"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="potCname" label="港口名称：">
                          <el-input maxlength="32"  v-model="xzData.potCname" clearable :disabled="!see"></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item prop="potEname" label="港口英文名：">
                          <el-input maxlength="32"  v-model="xzData.potEname" clearable :disabled="!see"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="ctyEname" label="国家英文名：">
                          <el-input maxlength="32"  v-model="xzData.ctyEname" clearable :disabled="true"></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="国家名称：" prop="potCtyCd">
                            <el-select style="width: 100%;" filterable allow-create clearable v-model="xzData.potCtyCd" @change="getprvName" :disabled="!see">
                              <el-option
                              v-for=" item in listData"
                              :key="item.CTY_CD"
                              :value="item.CTY_CD"
                              :label="item.CTY_CNAME"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="省中文名称：" prop="potPrvCode">
                            <el-select style="width: 100%;" filterable allow-create clearable v-model="xzData.potPrvCode" @change="getctyName" :disabled="!see">
                              <el-option
                                v-for=" item of Province"
                                :key="item.PRV_CODE"
                                :value="item.PRV_CODE"
                                :label="item.PRV_CHNNAME"
                              ></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="市中文名称：" prop="potCtyeCode">
                            <el-select style="width: 100%;" filterable allow-create clearable v-model="xzData.potCtyeCode" :disabled="!see">
                              <el-option
                                v-for=" item in city"
                                :key="item.CTYE_CODE"
                                :value="item.CTYE_CODE"
                                :label="item.CTYE_CHNNAME"
                              ></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="potEdicode" label="EDI对应代码：">
                          <el-input maxlength="32"  v-model="xzData.potEdicode" clearable :disabled="!see"></el-input>
                        </el-form-item>
                      </el-col>

                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="有效标准" prop="potIsvalid" >
                          <el-radio-group v-model="xzData.potIsvalid" :disabled="!see">
                            <el-radio label="Y" >是</el-radio>
                            <el-radio label="N">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="potX" label="港口坐标：" >
                          <el-input maxlength="32"  v-model="xzData.potX" clearable style="width:40%" :disabled="!see"></el-input>
                          <el-input maxlength="32"  v-model="xzData.potY" clearable style="width:40%; margin-left: 5px;" :disabled="!see"></el-input>
                          <el-link type="primary" :underline="false" style="margin-left: 5px;" @click="openMap">定位</el-link>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                        <el-form-item prop="potRemark" label="备注：">
                          <el-input maxlength="32" type="textarea" v-model="xzData.potRemark" clearable :disabled="!see"></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
               <div  class="dialog-footer">
                  <div class="btn">
                      <el-button type="primary" v-if="see" @click="saveEditor('xzData')" size="mini">保存</el-button>
                      <el-button  @click="close" size="mini">关闭</el-button>
                  </div>
              </div>
        </el-dialog>
        <el-dialog
          title='地图定位'
          width="40%"
          :visible.sync="showMap"
          v-if="showMap"
          :close-on-click-modal="false"
          :append-to-body="true">
          <baidu-map :height="height" @choose="savePot"></baidu-map>
          <div  class="dialog-footer">
            </div>
        </el-dialog>
  </div>
</template>

<script>
import {selectTmPortsInfos,getCPC,addTmPortsInfo,updateTmPortsInfo,delPortMag} from '@/request/api'
import baiduMap from '@/components/baidumap'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  components:{baiduMap},
  data(){
    return{
      maxheight:-1,
      height:200,
      from:{
        code:'',
        name:'',
        yname:'',
        customerName:'',
        gysmc:'',
      },
      item:{
        item:true,
        itemA:false
      },
      listData:[

      ],
      Province:[{PRV_CODE: 'HB',
        PRV_CHNNAME: '湖北',}],
      city:[{CTY_PRV_CODE: 'HB',
        CTY_CHNNAME: '武汉市',}],
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      see:true, //保存按钮
      DetailedData:[], //主列表的数据
      currentData:{},//单行数据
      xzData:[],// 传给新增 编辑弹出框的数据
      showMap:false,
      //表单验证
      rules:{
        code: { },
        name: { },
        yname: { },
        customerName: { },
        gysmc: { },
      },
      //表单验证 新增 编辑
      addRules:{
        ctyCname:[
          { required: true, message: '请选择代码类型', trigger:'change'}
        ],
        potCd:[
          { required: true, message: '请填写港口代码', trigger:'blur'}
        ],
        potCname:[
          { required: true, message: '请填写港口中文名称', trigger:'blur'}
        ],
        potCtyCd:[
          { required: true, message: '请填写国家中文名称', trigger:'blur'}
        ],
        ctyEname:[ { required: true, message: '请填写国家英文名称', trigger:'blur'}],
        potEname:[{ required: true, message: '请填写港口英文名称', trigger:'blur'}],
        potPrvCode:[{ required: true, message: '请填写省中文名称', trigger:'blur'}],
        potCtyeCode:[{ required: true, message: '请填写市中文名称', trigger:'blur'}]
      },
    }
  },
  created(){
    this.resize=()=>{
      this.maxheight=this.$refs.inner.offsetHeight
      // console.log(this.maxheight)
    }
  },
  mounted(){
    this.refreshList()
    getCPC().then(res=>{
      // this.Province=[]
      // this.city=[]
      this.listData=res.data  //国家
      if(this.listData.length>0){ //省
        this.listData.forEach(item=>{
          if(item.childrenPrv.length>0){
            this.Province=[]
            for(let i=0;i<item.childrenPrv.length;i++){
              this.Province.push(item.childrenPrv[i])
            }
          }

        })
      }
      if(this.Province.length>0){ //市
        this.Province.forEach(item=>{
          if(item.childrenCity.length>0){
            this.city=[]
            for(let i=0;i<item.childrenCity.length;i++){
              this.city.push(item.childrenCity[i])
            }
            // console.log(this.city)
          }
        })
      }
    })

  },
  methods:{
    //大写
    uppercase(key) {
      this.xzData[key] = this.xzData[key].toUpperCase()
    },
    //获取市
    getctyName(name){
      console.log(name)
      if(this.Province.length>0){ //市
        this.Province.forEach(item=>{

          if(item.PRV_CODE===name){

            this.city=item.childrenCity
          }

        })
      }
    },
    //获取国家英文名称 以及省
    getprvName(name){
      // console.log(name)
      if(this.listData.length>0){ //省
        this.listData.forEach(item=>{
          if(item.CTY_CD===name){
            this.xzData.ctyEname=item.CTY_ENAME
            this.Province=item.childrenPrv
          }
        })
      }
    },
    //保存坐标
    savePot(res){
      // console.log(res)
      if(res){
        this.xzData.potX=res.point.lng
        this.xzData.potY=res.point.lat
        this.$confirm('选取坐标成功!', '提示', {
          confirmButtonText: '确定'
        }).then(()=>{
          this.showMap=false
        }).catch(()=>{
          this.xzData.potX=''
          this.xzData.potY=''
        })
      }
    },
    //打开地图
    openMap(){
      this.showMap=true
      // console.log(1111)
    },
    //获取表格数据
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      selectTmPortsInfos({
        potCd:this.from.code,//港口中文名
        potEname:this.from.yname,//港口英文名
        potCname:this.from.name,//港口中文名
        potCtyCd:this.from.gysmc,//国家代码
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        // if(response.success==1){
        this.DetailedData = response.data
        updateTotal(Number(response.total))
      })
    },
    // 点击搜索
    searchType(){
      this.$refs.flt.validate(valid=>{
        if(valid){
          this.getList(this.Pagination.currentPage,this.Pagination.pageSize,this.updatePaginationTotal)
        }
      })
    },
    //新增
    add(){
      this.addText='新增港口'
      this.diong=''
      this.addShowA=true
      this.see=true
      this.xzData={
        potCd: '',
        potCname: '',
        potEdicode: '',
        potIsvalid: 'Y',
        potRemark: '',
        potEname: '',
        potCtyCd: '',
        potX: '',
        potY: '',
        potEport: '',
        potPrvCode: '',
        potCtyeCode: '',
        ctyCname: '',
        ctyEname: '',
        ctyeChnname: '',
        prvChnname:''
      }
    },
    //编辑
    del(){
      this.addText='编辑港口'
      this.diong='E'
      this.see=true
      this.addShowA=true
      this.xzData=Object.assign({},this.currentData)
    },
    //单击行数据
    rowClick(row){
      this.currentData=Object.assign({},row)
    },
    //删除
    examine(){
      if(Object.keys(this.currentData).length==0){
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false
      }).then(()=>{
        delPortMag(this.currentData.potCd).then(res=>{
          if(res.success=='1'){
            this.$message ({
              type: 'success',
              message: '删除成功'
            })
            this.refreshList()
          }
        })
      })
    },
    //双击查看
    // rowdbClick(){
    // this.viewDetails()
    // },
    // 点击查看详情
    viewDetails(){
      if(Object.keys(this.currentData).length==0){
        this.$alert('请选择需要查看的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.addText='港口信息'
      this.addShowA=true
      this.diong='E'
      this.see=false
      this.xzData=Object.assign({},this.currentData)
    },
    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            updateTmPortsInfo(this.xzData).then(res=>{
              if(res.success=='1'){
                this.$message ({
                  type: 'success',
                  message: '编辑成功'
                })
                this.close()
                this.$refs[xzData].resetFields()
              }
            })
          }else{
            addTmPortsInfo(this.xzData).then(res=>{
              // console.log(res)
              if(res.success=='1'){
                this.$message ({
                  type: 'success',
                  message: '添加成功'
                })
              }
              this.close()
              this.$refs[xzData].resetFields()
            })
          }
        } else {
          return false
        }
      })
    },
    // 关闭弹出框
    close(){
      this.addShowA=false
      this.currentData={}
      this.refreshList()
    }
  }
}
</script>

<style  lang="scss" scoped>
.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}

.right-detail {
  height:100%;

  .top-type {
    width: 100%;
    height: 94%;
    display:flex;
    flex-direction:column;
    .btn-area{
      padding:0 0 10px 0;
    }
    .table {
      flex:1;
    }
    .pages{
      height:30px;
    }
  }
  .bottom-code {
    width: 100%;
    height: 100%;
  }
}

// .pagination {
//   margin: 0.3rem 0;
// }
.dialog-footer {
    position: relative;
    width: 100%;
    height: 40px;
    .btn {
      position: absolute;
      right:15px;
    }
  }
  .block{
    float: left;
  }
</style>
